<template>
  <div class="archive-list-cell">
    <div class="info">
      <div style="width: 100px" class="base-info">
        <tag v-if="commit.status === 1" type="success" effect="dark">AC</tag>
        <tag v-if="commit.status === 2" type="danger" effect="dark">WA</tag>
        <tag v-if="commit.status === 3" type="danger">CE</tag>
        <tag v-if="commit.status === 4" type="warning" effect="dark">TLE</tag>
        <tag v-if="commit.status === 5" type="warning">MLE</tag>
      </div>
      <div style="width: 100px" class="base-info">
        <tag v-if="commit.language === 1" type="info">Java</tag>
        <tag v-if="commit.language === 2" type="info">PHP</tag>
      </div>
      <div style="width: 390px" class="base-info">
        <div class="wrap">
          <div class="text-ellipsis">
            <Button type="text" @click="commitInfo(commit)">{{ commit.code }}</Button>
          </div>
        </div>
      </div>
      <div style="width: 200px" class="base-info">
        &nbsp;
        <tag type="info">{{commit.createTime}}</tag>
      </div>
      <div style="width: 150px" class="base-info">
        &nbsp;
        <Tag type="success" @click="commitError(commit)">代码运行结果</Tag>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mixin } from "@/utils";
import { Tag, Button, MessageBox, Message, Alert, Dialog } from "element-ui";

export default {
  props: {
    commit: {
      Type: Object,
    },
  },
  mixins: [mixin],
  components: { Tag, Button, MessageBox, Message, Alert, Dialog },
  methods: {
    commitInfo(commit) {
      if(commit.language === 2) {
        commit.code = commit.code.replace('<?php', '');
      }
      MessageBox.alert('<pre>' + commit.code + '</pre>', '执行的代码', {
        dangerouslyUseHTMLString: true
      });
    },
    commitError(commit) {
      if(commit.status === 1) {
        MessageBox.alert('代码已成功通过所有样例~！', '运行通过', {
          dangerouslyUseHTMLString: true
        });
      }
      if(commit.status === 2) {
        MessageBox.alert('<pre>' + commit.error + '</pre>', '输出不正确', {
          dangerouslyUseHTMLString: true
        });
      }
      if(commit.status === 3) {
        MessageBox.alert('<pre>' + commit.error + '</pre>', '运行错误', {
          dangerouslyUseHTMLString: true
        });
      }
      if(commit.status === 4) {
        MessageBox.alert('<pre>' + commit.error + '</pre>', '超出时间限制', {
          dangerouslyUseHTMLString: true
        });
      }
      if(commit.status === 5) {
        MessageBox.alert('<pre>' + commit.error + '</pre>', '超出内存限制', {
          dangerouslyUseHTMLString: true
        });
      }
    }
  }
};
</script>
<style>
.el-message-box {
  width: auto;
}
</style>
<style lang="stylus" scoped type="text/stylus" rel="stylesheet/stylus">
@import '../../../assets/stylus/theme.styl';

.wrap {
  //width: 100%;
  width: 390px;
}

.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

.line {
  height: 1px;
  background-color: $color-gradually-gray-91;
  margin: 10px 20px;
}

.archive-list-cell {
  position: relative;
  padding: 5px 0;

  &::after {
    content: '';
    position: absolute;
    min-height: 25px;
    top: 0;
    bottom: 0;
    left: 88px;
    width: 4px;
    background: $default-link-hover-color;
  }

  .info {
    display: flex;
    font-size: 17px;
    line-height: 25px;
    margin-left: 35px;
    cursor: pointer;

    @media only screen and (max-width: 720px) {
      font-size: 13px;
    }

    .time-tag {
      flex-shrink: 0;
    }

    .base-info {
      a.title {
        margin-left: 25px;
        color: $default-title-color;
        cursor: pointer;

        &:hover {
          color: $default-title-hover-color;
        }
      }

      a.see-desc {
        color: $default-desc-color;
        font-size: 13px;
        margin-left: 5px;
        font-weight: 100;
        cursor: pointer;

        > i {
          transition: All 0.4s ease-in-out;
          transform: rotateX(180deg);
        }

        &:hover, &.show {
          color: $default-desc-hover-color;
        }

        &.show {
          > i {
            transform: rotateX(0deg);
          }
        }
      }

      .desc {
        font-size: 14px;
        font-weight: 300;
        margin-left: 5px;
        color: $default-desc-color;
        overflow: hidden;
        max-height: 0;
        transition: All 0.4s ease-in-out;

        &.show {
          max-height: 250px;
        }
      }
    }
  }
}
</style>
